import React, {
  Component,
  useState,
  useEffect,
} from "react";
import {
  View,
  Text,
  ScrollView,
} from "react-native";
import Content from "../../components/content/content";
import styles from "./bonus-rule-sheet";
import * as api from '../../api';

export default function BonusRule(props) {
  const [data, setData] = useState('');
  useEffect(() => {
    global.showLoading();
    api.getAwardSetting().then(res => {
      console.log(res);
      setData(res);
    }).catch(rej => {
      global.showToast(rej);
    }).finally(() => {
      global.closeLoading();
    });
  }, []);

  renderData = () => {
    return data.map((v, index) => {
      return (
        <View key={index} style={styles.marginTop20}>
          <View>
            <Text>&nbsp;&nbsp;&nbsp;&nbsp;{v.name}:</Text>
          </View>
          {
            firstDes(v)
          }
          {
            levels(v)
          }
          {   
            lastDes(v)  
          }
        </View>
      )
    })
  }

  firstDes = (v) => {
    if (!v.first_des || v.first_des.length === 0) {
      return null;
    }
    return v.first_des.map((v, index) => {
      return (
        <View>
          <Text key={index}>&nbsp;&nbsp;&nbsp;&nbsp;{v}</Text>
        </View>
      )
    })
  }

  levels = (v) => {
    if (!v.levels || v.levels.length === 0) {
      return null;
    }
    return v.levels.map((v, index) => {
      return (
        <View>
          <Text key={index}>&nbsp;&nbsp;&nbsp;&nbsp;{v.rule}</Text>
        </View>
      )
    })
  }

  lastDes = (v) => {
    if (!v.last_des || v.last_des.length === 0) {
      return null;
    }
    return v.last_des.map((v, index) => {
      return (
        <View>
          <Text key={index}>&nbsp;&nbsp;&nbsp;&nbsp;{v}</Text>
        </View>
      )
    })
  }

  return (
    <Content>
      <ScrollView style={{flex:1}}>
        <View style={styles.content}>
          <View><Text>奖励规则:</Text></View>
			    <View>
            {
              data ? renderData() : (<Text>暂无数据</Text>)
            }
          </View>
        </View>
      </ScrollView>
		</Content>
  )
}